<template>
    <div class="signin">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="sign-box">
            <div class="sign-btn center color-f">
                <img :src="signRect" alt="">
                <p class='signIn'>{{signInList.is_sign === 1 ? '已签到' : '签到'}}</p>
                <p class='signTime'>{{signInList.this_time}}</p>
            </div>
        </div>
        <inlineCalendar
        v-if="calendar"
        mode="multiple"
        :defaultDate="defaultDate"
        :weekNames="week"/>
    </div>
</template>
<script>
import Calendar from 'vue-mobile-calendar'
export default {
    data(){
        return{
            day:10,
            isBack:true,
            calendar:false,
            title:'签到',
            bg:{
                backgroundImage: "url(" + require("../../assets/account/coupon.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
            },
            jifen:require("../../assets/account/jifen.png"),
            daynum:require("../../assets/account/daynum.png"),
            signRect:require("../../assets/account/signRect.png"),
            couponlist:[
                {
                    price:10,
                    total:100,
                    jf:300,
                },
                {
                    price:10,
                    total:100,
                    jf:300,
                }
            ],
            signInList:{},
            week:['日','一','二','三','四','五','六'],
            defaultDate:[],
        }
    },
    watch:{
        calendarShow:function(val){
            console.log(val)
        }
    },
    mounted(){
        this.signInRecord()
    },
    methods:{
       signInRecord(){
           var url = this.$host1 + `home/sign/signRecord` 
           let params={
               month:'09',
               year:'2019'
           }
           this.$axios.get(url,{params}).then(res=>{
               this.signInList=res.data.data
               let signRecord=res.data.data.sign_list
               signRecord.forEach(element => {
                   this.defaultDate.push(element.sign_time)
               });
               this.calendar=true
           })
       }
    }
}
</script>
<style lang="scss" scoped>
.signin{
    margin-bottom: 0.2rem;
    .sign-box{
        padding-top: 0.001rem;
        margin-top: 1rem;
        width: 100%;
        height: 4rem;
        position: relative;
        background: linear-gradient(to bottom,#680DAE,#9529C6);
        .rule{
            width:1.1rem;
            height:0.4rem;
            background:#b17cd1;
            position: absolute;
            right: 0;
            top:0.1rem;
            border-radius:0.2rem 0 0 0.2rem;
        }
        .sign-btn{
            position:relative;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            margin: 0.5rem auto 0;
            img{
                width:100%;
                height:100%;
            }
            .signIn{
                position:absolute;
                top:52px;
                width:100%;
                font-size:20px;
                text-align:center;
            }
            .signTime{
                position:absolute;
                top:83px;
                width:100%;
                font-size:16px;
                text-align:center;
            }
        }
        .text{
            margin-top: 0.3rem;
        }
    }
    .num-data{
        position: absolute;
        margin-top: -1rem;
        height: 1.9rem; 
        .contents{
            width: 100%;
            height: 100%;
            border-radius: 0.1rem;
            .contents-item{
                position: relative;
                width: 50%;
                height: 1.5rem;
                //background-color: greenyellow;
                .num{
                    font-size: 0.72rem;
                }
                .kinds{
                    width: auto;
                    //background-color: greenyellow;
                    text-align: center;
                    margin: 0.2rem auto 0;
                    .yuan{
                        width: 0.38rem;
                        height: 0.38rem;
                        border-radius: 50%;
                        margin-right: 0.1rem;
                        background: linear-gradient(0deg,rgba(249,225,70,1) 0%,rgba(254,194,70,1) 100%);
                        img{
                            //margin-top: 0.06rem;
                            width: 0.26rem;
                            height: 0.26rem;
                            margin-right: 0;
                        }
                    }
                    img{
                        width: 0.38rem;
                        height: 0.38rem;
                        margin-right: 0.1rem;
                    }
                }
            }
            .after::after{
                content:'';
                width: 0;
                height: 1.5rem;
                position: absolute;
                right: 0;
                margin-top: -1.45rem;
                border-left:0.01rem solid #efefef; 
            }
        }
    }
    .gift{
        height: auto;
        margin-top: 1.2rem;
        .gift-content{
            width: 100%;
            border-radius: 0.1rem;
            .title{
                line-height: 1rem;
            }
            .gift-list{
                padding-bottom: 0.2rem;
                width: 100%;
                height: auto;
                .list-item{
                    border: 0.01rem solid #e9e9e9;
                    border-radius: 0.15rem;
                    width: 100%;
                    height: 1.68rem;
                    margin-bottom: 0.2rem;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    .left{
                        width: 1.5rem;
                        //background-color: green;
                        span{
                            font-size: 0.6rem
                        }
                    }
                    .right{
                        width: calc(100% - 1.8rem);
                        //background-color: #680DAE;
                        .color-9{
                            margin-top: 0.1rem;
                        }
                        .bg-r{
                            width:1.2rem;
                            height:0.4rem;
                            border-radius:0.2rem;
                        }
                    }
                }
            }
        }
    }
}
</style>
